/* 页面容器 */
.records-container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 0rpx;
}

/* 初始占位视图，用于解决闪屏问题 */
.initial-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999999;
}

/* 记录项容器 */
.record-item {
  display: flex;
  padding: 10rpx;
  background-color: #ffffff;
  margin: 10rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.record-item:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

/* 书籍封面 */
.book-cover {
  width: 140rpx;
  height: 190rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
  background-color: #f5f5f5;
  /* 添加点击效果 */
  transition: transform 0.2s ease;
}

.book-cover:active {
  transform: scale(1.05);
}

/* 记录信息容器 */
.record-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 书籍标题 */
.book-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 用户信息 - 修复头像和用户名位置 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  height: 48rpx; /* 固定高度确保对齐 */
}

.user-info{
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  background-color: #f0f0f0;
  flex-shrink: 0; /* 防止头像被压缩 */
}

.avatar{
  width: 96rpx;
  height:96rpx;
  border-radius: 50%;
	flex-shrink: 0;
}

.user-info.username {
  font-size: 28rpx;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	
}

/* 时间信息 */
.time-info {
  margin-bottom: 16rpx;
}

.time-info text {
  display: block;
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 6rpx;
  line-height: 1.4;
}

/* 状态标签 */
.status {
  align-self: flex-start;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #ffffff;
  font-weight: 500;
}

/* 不同状态的颜色 */
.status-borrowing {
  background-color: #1989fa;
}

.status-returned {
  background-color: #67c23a;
}

.status-overdue {
  background-color: #ee0a24;
}

/* 空状态提示 */
.empty-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 200rpx 0;
}

/* 加载状态 */
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
  z-index: 9999;
}

.loading van-loading {
  margin-right: 10rpx;
}

/* 适配不同屏幕 */
@media screen and (max-width: 320px) {
  .book-cover {
    width: 120rpx;
    height: 160rpx;
  }
  
  .book-title {
    font-size: 32rpx;
  }
}

.dialog-content{
	display: flex;
	align-items: center;
	flex-direction: column;
	text{
		min-height:2em;
	}
}